<template>
  <div class="home">
    <nav-bar></nav-bar>
    <banner :datas="datas.banner"></banner>
    <grid :datas="datas.categroy"></grid>
    <sticky-box ref="tab" class="sticky">
      <template>
        <tab :datas="datas.tab" :offsetTop="datas.taboffsetTop"></tab>
      </template>
    </sticky-box>
    <cover :datas="datas.goods.list"></cover>
    <go-top>
      <template>
        <img src="~assets/images/icon/gotop.svg" alt />
      </template>
    </go-top>
  </div>
</template>

<script>
import NavBar from "components/private/home/HomeNavBar";
import Banner from "components/private/home/HomeBanner";
import Grid from "components/private/home/HomeGrid";
import Tab from "components/private/home/HomeTab";
import Cover from "components/private/home/HomeGoodsCover";

import StickyBox from "components/public/sticky_box/StickyBox";
import GoTop from "components/public/gotop/GoTop";

export default {
  name: "Home",
  data() {
    return {
      datas: {
        banner: null,
        categroy: null,
        tab: null,
        taboffsetTop: 0,
        goods: {
          list: { type_one: null, type_two: null, type_three: null },
          cur: 1
        }
      }
    };
  },
  methods: {
    request() {
      this.$axios({
        url: "/queryhomedatas",
        method: "get"
      }).then(res => {
        this.datas.banner = res.banner;
        this.datas.categroy = res.categroy;
        this.datas.tab = res.categroy_base_title;
        this.datas.goods.list.type_one = res.goods.categroy_base_item1;
        this.datas.goods.list.type_two = res.goods.categroy_base_item2;
        this.datas.goods.list.type_three = res.goods.categroy_base_item3;
      });
    },
    loadMore() {
      window.onscroll = () => {
        //卷上去的高度
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //页面的总高度(包括卷上去的高度)
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        if (scrollTop + windowHeight == scrollHeight) {
          if (this.datas.goods.cur == 1 && this.datas.goods.list.type_one) {
            this.$axios({
              url: "/querycategoodsbybase",
              params: {
                categroy_id: this.datas.goods.cur,
                start: this.datas.goods.list.type_one.length
              }
            }).then(res => {
              if (res.length == 0) {
                return this.$toast.fail("暂无更多数据");
              }
              this.datas.goods.list.type_one.push(...res);
            });
          } else if (
            this.datas.goods.cur == 2 &&
            this.datas.goods.list.type_two
          ) {
            this.$axios({
              url: "/querycategoodsbybase",
              params: {
                categroy_id: this.datas.goods.cur,
                start: this.datas.goods.list.type_two.length
              }
            }).then(res => {
              if (res.length == 0) {
                return this.$toast.fail("暂无更多数据");
              }
              this.datas.goods.list.type_two.push(...res);
            });
          } else if (
            this.datas.goods.cur == 3 &&
            this.datas.goods.list.type_three
          ) {
            this.$axios({
              url: "/querycategoodsbybase",
              params: {
                categroy_id: this.datas.goods.cur,
                start: this.datas.goods.list.type_three.length
              }
            }).then(res => {
              if (res.length == 0) {
                return this.$toast.fail("暂无更多数据");
              }
              this.datas.goods.list.type_three.push(...res);
            });
          }
        }
      };
    },
    curGood() {
      this.$bus.$on("tabClick", curIndex => {
        this.datas.goods.cur = curIndex;
      });
    }
  },
  components: {
    NavBar,
    Banner,
    Grid,
    Tab,
    StickyBox,
    Cover,
    GoTop
  },
  created() {
    this.request();
    this.curGood();
  },
  activated() {
    this.loadMore();
  },
  deactivated() {
    window.onscroll = null;
  },
  mounted() {
    this.$bus.$on("imgLoad", () => {
      let taboffsetTop = this.$refs.tab.$el.offsetTop - 45;
      this.datas.taboffsetTop = taboffsetTop;
    });

  }
};
</script>

<style lang="less" scoped>
.home {
  padding-top: 45PX;
  padding-bottom: 40PX;
}

.sticky {
  top: 45PX;
}
</style>